<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>更改手机号码</title>
    <!-- 导入字体图样式 -->
    <link rel="stylesheet" href="../Public/iconfont/iconfont.css">
    <!-- 导入公共css样式 -->
    <link rel="stylesheet" href="../Public/css/common.css">
    <!-- 导入头部导航的JS样式 -->
    <script src="../Public/js/utils.js"></script>
    <!-- 导入JQuery库js样式 -->
    <script src="../Public/js/jQuery.mini.js"></script>
    <!-- 导入文档的CSS样式 -->
    <link rel="stylesheet" href="../Personalcenter/css/changePhoneNumber.css">
    <!-- 导入文档的JS样式 -->
    <!-- <script src="../Personalcenter/js/corporateInformation.js"></script> -->
    <script>
        window.onload = function() {      
            utils.addHeader(1, '更改手机号码', ``, 1);      
            // utils.addFooter(1);
        }
        $(function() {
            // 点击输入框 当前边框高亮 其他边框恢复
            $('input').click(function() {
                $(this).parent('.cell').addClass('blue').siblings('.cell').removeClass('blue');
            });
            // 输入框 输入内容时 删除按钮 显示
            $('.ipt').keyup(function() {
                $('.icon').show();
                // console.log($(this).val());
            });
            // 点击删除按钮 输入框内容清空 且 按钮消失
            $('.icon').click(function() {
                $('.ipt').val(''); //赋值 写在括号内 父元素是display:none 时 会失效
                $(this).hide();
            });
            // 点击 获取验证码 弹出 选项卡
            $('.get').click(function() {
                $('.tips').show();
            });
            // 定义时间变量
            var time = 10;
            // 点击 获取验证码 
            $('.correct_a').click(function() {
                    // 设置定时器
                    var timer = setInterval(function() {
                        if (time == 0) {
                            clearInterval(timer)
                            $('.get').html('获取验证码')
                        } else {
                            $('.get').html(time + '\t' + 'S');
                            time--;
                        }
                    }, 1000);
                    $('.tips').hide();
                })
                // 提示框消失
            $('.error_a').click(function() {
                $('.tips').hide();
            });
            // 点击 确定  提示框2 显示
            $('.confirm').on('click', function() {
                    $('.tips_2').show();
                })
                // 点击 验证正确 提示框消失 弹出修改成功
            $('.correct_b').click(function() {
                $('.tips_2').hide();
                $('.save').show().children('.tip').html('修改成功');
                var close = setInterval(function() { // 定时消失
                    clearInterval(close);
                    $('.save').stop().fadeOut();
                    window.location.assign('setting.html')
                }, 1500)
            })
        })
    </script>
</head>

<body>
    <div class="box">
        <div class="phoneNumber cell">
            <span class="le">+86</span>
            <span class="shuxian">|</span>
            <input type="number" class="ipt" placeholder="请输入您要修改的手机号码" value="" maxlength="5">
            <!-- <span class="icon iconfont icon-xianshi_quxiao"></span> -->
            <img src="https://www.pmdaniu.com/storages/128883/c30852cb8b54afb8568d1f9db2822068-57026/images/登录/1_u2116.png" alt="" class="icon">
        </div>
        <div class="getCode cell">
            <input type="text" class="code" placeholder="请输入验证码" value="">
            <span class="get">获取验证码</span>
            <div class="tips" style="display:none">
                <span class="correct correct_a">号码格式正确</span>
                <span class="error error_a mt-5">号码格式错误</span>
                <span class="sanjiao"></span>
            </div>
        </div>
        <div class="confirm">
            <span>确定</span>
            <div class="tips_2" style="display:none">
                <span class="correct correct_b">验证通过</span>
                <span class="error error_b ">漏填或错填</span>
                <span class="sanjiao"></span>
            </div>
        </div>
    </div>
    <div class="save" style="display:none">
        <span class="icon"></span>
        <span class="tip"></span>
    </div>

</body>

</html>